<template>
  <view class="order-item mb-5">



    <view class="item-top mt-2 px-4 flex flex-items-center justify-between">
      <view class="item-top-left flex flex-items-center">
        <img :src="order.avatar" alt="" />
        <view class="ml-4">
          <view class="item-top-left-title">{{ order.name }}</view>
          <text class="item-top-left-time">{{ order.time }}</text>
        </view>
      </view>
      <view class="item-top-right flex flex-col flex-items-center justify-center">
        <view class="item-top-right-status">{{ order.status }}</view>
        <view class="item-top-right-time">{{ order.timeLeft }}</view>
      </view>
    </view>
    <view class="item-center px-4 mt-2">
      <view style="width: 11.31rem" class="item-center-text flex flex-items-center justify-between">
        <view>快递类型：{{ order.type }}</view>
        <view>快递数量：{{ order.number }}</view>
      </view>
      <view
        style="width: 12rem; margin-top: 0.56rem"
        class="item-center-text flex flex-items-center justify-between"
      >
        <view>{{ order.timeExpect }}</view>
        <view>备注：{{ order.remark }}</view>
      </view>
      <view class="item-center-content mt-2.5 flex flex-items-center">
        <view class="item-center-content-img" style="background-color: rgba(20, 190, 50, 1)">
          起
        </view>
        <view class="item-center-content-text ml-4" style="color: rgba(20, 190, 50, 1)">
          {{ order.startAddress }}
        </view>
      </view>
      <view class="item-center-content mt-2.5 flex flex-items-center">
        <view class="item-center-content-img" style="background-color: rgba(82, 133, 250, 1)">
          终
        </view>
        <view class="item-center-content-text ml-4" style="color: rgba(82, 133, 250, 1)">
          {{ order.endAddress }}
        </view>
      </view>
    </view>
    <view class="item-bottom px-4 flex flex-items-center justify-between">
      <view v-show="order.isShow" class="item-bottom-left flex flex-items-center">
        <img src="@/static/app/custom-icon/riFill-message.png" alt="" />
        <text class="ml-4">私信</text>
      </view>
      <view v-show="!order.isShow"></view>
      <view class="item-bottom-right flex flex-items-center">
        <view v-show="order.isShow" class="item-bottom-right-jie">接单</view>
        <view class="item-bottom-right-money">{{ order.money }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
defineProps(['order'])
</script>
<style scoped lang="scss">
.order-item {
  width: 21.75rem;
  height: 12.25rem;
  margin-bottom: 1.19rem;
  font-family: PingFangSC-regular;
  color: rgba(16, 16, 16, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
  box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);

  .item-top {
    .item-top-left {
      img {
        width: 1.88rem;
        height: 1.88rem;
      }
      .item-top-left-title {
        font-family: PingFangSC-regular;
        font-size: 0.88rem;
        line-height: 1.25rem;
        color: rgba(16, 16, 16, 1);
        text-align: left;
      }
      .item-top-left-time {
        font-family: PingFangSC-regular;
        font-size: 0.63rem;
        line-height: 0.75rem;
        color: rgba(114, 114, 114, 1);
        text-align: left;
      }
    }
    .item-top-right {
      .item-top-right-status {
        width: 3.31rem;
        height: 1.19rem;
        font-size: 0.63rem;
        line-height: 1.19rem;
        color: rgba(255, 189, 84, 1);
        text-align: center;
        background-color: #fdf6d2;
        border-radius: 0.88rem;
      }
      .item-top-right-time {
        height: 0.81rem;
        font-family: PingFangSC-regular;
        font-size: 0.5rem;
        line-height: 0.75rem;
        color: rgba(82, 133, 250, 1);
        text-align: left;
      }
    }
  }
  .item-center {
    .item-center-text {
      font-family: PingFangSC-regular;
      font-size: 0.63rem;
      color: rgba(0, 0, 0, 1);
    }
    .item-center-content {
      .item-center-content-img {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.5rem;
        line-height: 1.25rem;
        color: #ffffff;
        text-align: center;
        border-radius: 50%;
      }
      .item-center-content-text {
        font-family: PingFangSC-regular;
        font-size: 0.5rem;
        line-height: 0.75rem;

        text-align: left;
      }
    }
  }
  .item-bottom {
    margin-top: 0.63rem;
    font-size: 0.63rem;
    .item-bottom-left {
      img {
        width: 1.44rem;
        height: 1.44rem;
      }
      text {
        line-height: 0.75rem;
        color: rgba(190, 190, 190, 1);
      }
    }
    .item-bottom-right {
      .item-bottom-right-jie {
        width: 2.75rem;
        height: 1.19rem;
        line-height: 1.19rem;
        color: #fff;
        text-align: center;
        background-color: rgba(64, 149, 229, 1);
        border-radius: 0.88rem;
      }
      .item-bottom-right-money {
        width: 2.75rem;
        height: 1.19rem;
        margin-left: 0.69rem;
        line-height: 1.19rem;
        color: rgba(82, 133, 250, 1);
        text-align: center;
        border: 0.06rem solid rgba(82, 133, 250, 1);
        border-radius: 0.88rem;
      }
    }
  }
}
</style>
